<!DOCTYPE html>
<!--
Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
	<title>Get Clipboard HTML and RTF</title>
	<style>

		textarea {
			border: 1px solid #808080;
			float: left;
			height: 200px;
			width: 100%;
			overflow: auto;
			margin-bottom: 20px;;
		}
		span {
			background-color: #88FFAA;
		}
		.marker {
			background-color: #FF9999;
		}
	</style>
	<script src="../../ckeditor.js"></script>
</head>
<body>
	<p>Paste Inside the Editor:</p>
	<div><textarea id="input"></textarea></div>
	<div>
		<div style="float: left; width: 49%">
			<p>Raw HTML Data Received: <span id="emHtml"></span></p>
			<textarea data-name="input.html" id="rawHtml" readonly="readonly"></textarea>
			<button id="htmlData">Save HTML Data</button>
		</div>
		<div style="float: right; width: 49%">
			<p>Raw RTF Data Received: <span id="emRtf"></span></p>
			<textarea data-name="input.rtf" id="rawRtf" readonly="readonly"></textarea>
			<button id="rtfData">Save RTF Data</button>
		</div>
	</div>
	<div style="width: 100%; float: left;">
		<p>After Paste Processing:</p>
		<textarea id="output" readonly="readonly"></textarea>
	</div>

	<script>
	var editor = CKEDITOR.replace( 'input', {
		height: 100,
		allowedContent: true,
		plugins: 'pastefromword,wysiwygarea,resize'
	} );

	editor.on( 'paste', function( evt ) {
		// Clipboard text/html processing.
		var val = evt.data.dataValue;
		if ( evt.data.dataTransfer && evt.data.dataTransfer.getData( 'text/html', true ) ) {
			val = evt.data.dataTransfer.getData( 'text/html', true );
			document.getElementById( 'emHtml' ).innerHTML = '<br />Data from: <code>dataTransfer.getData( \'text/html\', true )</code>.';
		} else {
			document.getElementById( 'emHtml' ).innerHTML = '<br /><code>dataTransfer.getData( \'text/html\', true )</code> was empty.' +
			'<br /><span class="marker">Data from: <code>evt.data.dataValue</code>.</span>';
		}
		document.getElementById( 'rawHtml' ).value = val;

		// Clipboard text/rtf processing.
		val = '';
		if ( evt.data.dataTransfer && evt.data.dataTransfer.getData( 'text/rtf' ) ) {
			val = evt.data.dataTransfer.getData( 'text/rtf', true );
			document.getElementById( 'emRtf' ).innerHTML = '<br />Data from: <code>dataTransfer.getData( \'text/rtf\', true )</code>.';
		} else {
			document.getElementById( 'emRtf' ).innerHTML = '<br /><code>dataTransfer.getData( \'text/rtf\', true )</code> was empty';
		}
		document.getElementById( 'rawRtf' ).value = val;

	}, null, null, -1 );

	editor.on( 'paste', function( evt ) {
		setTimeout( function() {
			document.getElementById( 'output' ).value = editor.getData();
		}, 0 );
	}, null, null, 999 );

	var rtfButton = document.getElementById( 'rtfData' ),
		htmlButton = document.getElementById( 'htmlData' );

	rtfButton.onclick = save( document.getElementById( 'rawRtf' ) );
	htmlButton.onclick = save( document.getElementById( 'rawHtml' ) );

	function save( input ) {
		return function() {
			var textBlob = new Blob( [ input.value ], { type: 'text/plain' } );
			var saveLink = document.createElement( 'a' );

			saveLink.download = input.dataset.name;
			saveLink.innerHTML = 'Save file';
			if ( CKEDITOR.env.webkit ) {
				saveLink.href = window.URL.createObjectURL( textBlob );
			} else {
				saveLink.href = window.URL.createObjectURL( textBlob );
				saveLink.onclick = function( evt ) {
					document.body.removeChild( evt.target )
				};
				saveLink.style.display = 'none';
				document.body.appendChild( saveLink );
			}
			saveLink.click();
		}
	}

	</script>
</body>
</html>
